﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<SetListManager.Models.SetListSongsModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Edit
</asp:Content>
<asp:Content ID="Head1" ContentPlaceHolderID="HeadContent" runat="server">
    <%--jquery base--%>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>   
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>   
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>   
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />

    <%--jquery drag/drop support for iPad --%>
    <script src="../../Scripts/jquery.ui.touch-punch.min.js" type="text/javascript"></script>

    <%--jquery validate: allows validation of dialog boxes--%>
    <script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>

    <%--jquery tinysort: enables the little buttons that lets us sort our song list by Name, Soloist--%>
    <script src="../../Scripts/jquery.tinysort.min.js" type="text/javascript"></script>

    <%--jquery json: gives us functions to build json so we can return it to our server--%>
    <script src="../../Scripts/jquery.json-2.3.min.js" type="text/javascript"></script>

    <%--Time Picker for change time dialog--%>
    <script src="../../Scripts/jquery.timePicker.js" type="text/javascript"></script>
    <link href="../../Content/timePicker.css" rel="stylesheet" type="text/css" />

    <%--Load our page-specific javascript support functions--%>
    <script src="../../Scripts/SetListEdit.js" type="text/javascript"></script>

    <%--TODO: Clean up styles and move into site.css--%>
    <style type="text/css">
        .edit_pagetable h2
        {
            margin: 0;
            padding: 5px;
            color: Black;
        }
        
        .edit_pagetable h2.trigger
        {
            padding-left: 15px;
            margin-left: 5px;
            background: url(/Images/minus-8.png) no-repeat;
            background-position: 0px 10px;
            color: Black;
        }
        
        .edit_pagetable h2.trigger a
        {
            text-decoration: none;
            display: block;
        }
        
        .edit_pagetable h2.trigger a:hover
        {
            color: blue;
        }
        
        .edit_pagetable h2.active
        {
            background: url(/Images/plus-8.png) no-repeat;
            background-position: 0px 10px;
        }
        
        .toggle_container
        {
            margin: 0 0 5px;
            width: 430px;
        }
        .toggle_container div p
        {
            padding: 5px 0;
            margin: 5px 0;
        }
        
        .draglist
        {
            padding-left: 0px;
            margin-left: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
            padding-top: 0px;
            width: 390px;
            list-style-type: none;
            padding-bottom: 2px;
        }
        
        .yellow
        {
            background-color: Yellow !important;
        }
        
        li.checksong
        {
            background: url(/Images/checkmark_10.gif) no-repeat;
            background-position: 3px 3px;
        }
        
        .draglist li
        {
            border-bottom: 1px solid white;
            list-style-type: none;
            font-size: 1.0em;
            line-height: 1.0em;
            	background-color: #eeeeee;
        }
        
        #dl_songlist li:nth-child(odd)  
        {
            	background-color: #cccccc;
        }
        #dl_songlist li:nth-child(even)  
        {
            	background-color: #eeeeee;
        }
        
        .node_wrapper
        {
            margin: 2px;
            padding: 4px 2px 4px 1px;
            cursor: pointer;
        }
        
        .songlist_header_wrapper
        {
            margin-top: 15px;
            padding: 3px 0 3px 38px;
        }
        
        .node_wrapper img
        {
            border: 0;
        }
        
        .node_song, .node_key, .node_singer, .node_note, .node_menu
        {
            display: inline-block;
        }
        
        .note_note
        {
            width: 300px;
            font-style: italic;
        }
        
        .node_song
        {
            width: 250px;
            margin-left: 15px;
        }
        .node_key
        {
            width: 25px;
            font-weight: bold;
        }
        .node_singer
        {
            display: inline;
            width: 50px;
            color: Green;
        }
        .node_length
        {
            display: none;
        }
        .node_menu
        {
            float: right;
        }
        
        .placeholder-highlight
        {
            height: 1.5em;
            line-height: 1.5em;
            /*background-color: white !important;*/
        	background: #777777 !important;
            
            border: 1px dotted #aaaaaa;
            padding: 1px;
            margin: 1px;
        }
        
        .settotal
        {
            width: 430px;
            text-align: right;
            padding: 0;
            margin: 0;
            font-size: .9em;
            font-weight: bold;
        }
        
        #songlist_wrapper, #setlist_wrapper
        {
            width: 430px;
        }
        
        #SongListDiv 
        {
            margin-left: -40px;
            margin-top: -10px;
        }
        
        #SetListDiv 
        {
        }
        
        .changelink 
        {
            font-size: 0.5em;
        }
        
        input
        {
            padding: 3px 8px 3px 8px;
            background: #e6e6e6 url(/Images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; 
        }

        .pop_dlg_label 
        {
            width: 100px;
            display: block;
            float: left;
            text-align: right;
            margin: 3px 15px 0 0;
        }
        .pop_dlg_field
        {
            width: auto;
        }
        .pop_dlg_field input 
        {
            width: 200px;
        }
    
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="editbuttons_rt">
        <a href="#" class="link-button" onclick="javascript:SaveSetList();">Save</a>
        <%: Html.ActionLink("Cancel", "Index", null, new { @class = "link-button" })%>
        <br />
        <a href="#" onclick="javascript:CopyToClipboard()">Copy To Clipboard</a>
    </div>
    <h1>
        Edit Set List</h1>
    <div class="edit_pagetable">
        <table>
            <tr>
                <td style="vertical-align: top;">
                    <div id="songlist_wrapper">
                        <h2>
                            Songs</h2>

                <div id="SongListDiv">
                    <div class="songlist_header_wrapper">
                        <div class="node_song"><b>Title</b> (<a href="javascript:SortSongListNameASC();">asc</a>&nbsp;<a href="javascript:SortSongListNameDSC();">dsc</a>)</div>
                        <div class="node_key"><b>Key</b></div>
                        <div class="node_singer"><b>Soloist</b> (<a href="javascript:SortSongListSoloistASC();">asc</a>&nbsp;<a href="javascript:SortSongListSoloistDSC();">dsc</a>)</div>
                    </div>
                            <% // Fill song list with initial song list.  Filtering
                                // panel above will allow songs to be filtered.
                                Html.RenderAction("LoadSongList"); %>
                        </div>
                    </div>
                    <div id="filter_div" style="visibility: hidden;">
                        <% using (Ajax.BeginForm("LoadSongList",
                                                    new AjaxOptions
                                                    {
                                                        HttpMethod = "GET",
                                                        UpdateTargetId = "SongListDiv",
                                                        OnSuccess = "SongListLoaded"
                                                    }))
                           { %>
                        <p>
                            Search
                            <%= Html.TextBox("SearchString")%></p>
                        <input type="submit" value="Refresh Song List >>>" /><br />
                        <% } %>
                    </div>
                </td>
                <td style="vertical-align: top;">
                    <h2>
                        <span id="spansetname"><%: Html.DisplayFor(m=>Model.SetList.Name) %></span><br />
                        <span id="spansetdate"><%: Html.DisplayFor(m=>Model.SetList.GigDate) %></span>, 
                        <span id="spansettime"><%: Html.DisplayFor(m=>Model.SetList.GigTime) %></span>&nbsp;<span class="changelink"><a href="#" onclick="LaunchEditDialog()">Change</a></span></h2>
                    <input type="hidden" id="SetListID" value="<%: Html.DisplayFor(m=>Model.SetList.SetListID) %>" />
                    <div id="setlist_wrapper">
                        <% // Fill song list with initial song list.  Filtering
                            // panel above will allow songs to be filtered.
                            Html.RenderAction("LoadSetList"); %>
                    </div>
                    <p style="margin-left: 38px;">
                        <input class="link-button" name="AddSet" value="Add New Set" type="button" onclick="javascript:AddSet();" /><br />
                    </p>
                </td>
            </tr>
        </table>
    </div>
    <p>NOTE: Set list timing assumes a 60 second pause between songs.</p>


<%--JQueryUI Dialog Box Definitions--%>

    <div id="editdialog" title="Edit Set List Details">
    <div class="pop_dlg_label">Set List Name:</div><div class="pop_dlg_field"><input type="text" id="editname" /></div><br />
    <div class="pop_dlg_label">Gig Date:</div><div class="pop_dlg_field"><input type="text" id="editdate" /></div><br />
    <div class="pop_dlg_label">Gig Time:</div><div class="pop_dlg_field"><input type="text" id="edittime" /></div>
    </div>

    <div id="clipboarddialog" title="Copy Set List to Clipboard">
    <p>Your set list is displayed below in plain text. <br />To copy this text to the clipboard, press CTRL-A, CTRL-C</p>
    <div style="width: 350px; height: 500px;"><textarea id="setlisttext" rows="25" cols="60"></textarea></div><br />
    </div>


    <script type="text/javascript">

        $(function () {
            // Javascript function which runs once all the page elements have been loaded
            InitSetLists();
            UpdateTotals();
            CheckForDuplicates();

            $(editdialog).dialog({
                autoOpen: false,
                modal: true,
                width: 400,
                buttons: {
                    "OK": function () {
                        // Copy values from dialog back to controls on our page
                        $(spansetname).text(editname.value);
                        $(spansetdate).text(editdate.value);
                        $(spansettime).text(edittime.value);
                        $(editdialog).dialog("close");
                    },
                    "Cancel": function () { $(editdialog).dialog("close"); }
                }
            });

            $(clipboarddialog).dialog({
                autoOpen: false,
                modal: true,
                width: 540,
                // position: "top",
                buttons: {
                    "OK": function () { $(editdialog).dialog("close"); }
                }

            });

            $("#editdate").datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true
            });

            $("#edittime").timePicker({
                startTime: "00:00", // Specify valid start and end time range
                endTime: "23:59",
                show24Hours: false, // use PM/AM
                separator: ':',
                step: 15
            });

            // Give our buttons JQuery-UI functionality
            // $("input:submit").button();
        });

        function LaunchEditDialog() {

            // This launches the edit dialog and is called when someone clicks on edit.

            // Set the fields in the dialog first before bringing it up
            $(editname).val($(spansetname).text());
            $(editdate).val($(spansetdate).text());
            $(edittime).val($(spansettime).text());

            // Bring it up
            $(editdialog).dialog("open");
        }


        function CopyToClipboard() {
            // Builds a string using the current edited setlist, and brings up
            // dialog, which lets user copy the text to clipboard

            var nl_text = "\n";

            // Format title
            var sl_text = $(spansetname).text() + nl_text + $(spansetdate).text() + " - " + $(spansettime).text() + nl_text;

            // Iterate each of our set lists (they have class ".setlistUL")
            $("ul.setlistUL").each(function (index, elem) {
                var newindex = index + 1;
                sl_text = sl_text + nl_text + "Set " + newindex + nl_text;

                // Iterate each "LI" which is a song or a note
                $(this).find("li").each(function () {

                    // Get itemid
                    var songid = $(this).attr("data-itemid");

                    var songname = $(this).find(".node_song").text();

                    // if it's a song, put the songID in our array
                    sl_text = sl_text + songname + nl_text;
                });
            });

            $(setlisttext).val(sl_text);
            $(clipboarddialog).dialog("open");
        }
    </script>
</asp:Content>
